<template>
  <div id="merchantHub">
  <el-container id="main_box">
	  <el-container >
		  <el-aside :width="isCollapse ? '64px' : '200px'">
			<!--侧边栏菜单-->
			<el-menu
			:router="true"
			class="el-menu-vertical-demo"
			background-color="#545c64"
			text-color="#fff"
			active-text-color="orange"
			:unique-opened="true"
			:collapse="isCollapse"
			:collapse-transition="false"
			>
			<span class="geren">商户管理</span>
        <router-link to="/personalcenter" class="geren">返回个人中心</router-link>
			<el-submenu >
				<template slot="title">订单管理</template>
				<el-menu-item index='/AllOrder'>
				<i class="el-icon-menu"></i>
				<span slot="title">全部订单</span>
				</el-menu-item>

				<el-menu-item index='/PendingOrders' >
				  <i class="el-icon-menu"></i>
				  <span slot="title">待收货订单</span>
				</el-menu-item>

				<el-menu-item index='/StayTakeOrders'>
				  <i class="el-icon-menu"></i>
				  <span slot="title">待提货订单</span>
				</el-menu-item>

					<el-menu-item index='/AlreadyTakeDelivery'>
						<i class="el-icon-menu"></i>
						<span slot="title">已提货订单</span>
					</el-menu-item>

				<el-menu-item index='/2'>
				  <i class="el-icon-menu"></i>
				  <span slot="title">退货订单</span>
				</el-menu-item>
			</el-submenu>
			
			<el-submenu>
				<template slot="title">资料维护</template>
				<el-menu-item index='/FileMaintenance'>
				<i class="el-icon-menu"></i>
				<span slot="title">商户资料维护</span>
				</el-menu-item>
			</el-submenu>
			
			<el-submenu>
				<template slot="title">统计</template>
				<el-menu-item index='/income'>
				<i class="el-icon-menu"></i>
				<span slot="title">收入</span>
				</el-menu-item>

			</el-submenu>
			
			</el-menu>
		  </el-aside>

		  <el-main>
			  <router-view></router-view>
		  </el-main>


	  </el-container>
  </el-container>
  </div>
</template>

<script>
export default {
  name:'merchantHub',
	data() {
	  return {
      isCollapse:false,
	    //图标数组
	    iconObj: {
	      '125': 'iconfont icon-user',
	      '103': 'iconfont icon-3702mima',
	      '101': 'iconfont icon-shangpin',
	      '102': 'iconfont icon-danju',
	      '145': 'iconfont icon-baobiao',
	    },
	  }
	},
	methods:{
		refreshPage(){
		  //页面自动刷新
		  location.reload();
    }
	},
  created() {
	  // this.refreshPage();
  },
}
</script>

<style scoped>
/* 父容器高度 */
#main_box {
  height: 100%;
}

 /*个人中心span*/
 .geren{
   margin-left: 15%;
   font-size: 20px;
 }

.el-header {
  /*
  在flex 布局的容器中，
  可以设置justify-content: space-between;实现两对齐
  */
  display: flex;
  justify-content: space-between;
  /* 当容器是flext，可以设置 align-items: center */
  align-items: center;
  div {
    display: flex;
    align-items: center;
  }
  span {
    margin-left: 20px;
  }
}

.el-main {
  background-color: #e9eef3;
}

/*个人中心span*/
.geren{
  margin-left: 25%;
  font-size: 20px;
  color: black;
  text-decoration: none;
}

</style>